<template>
	<view class="content">
		<view class="topBox">
			<view class="name">共{{footer.allNumber}}件宝贝</view>
			<view class="btnManage" @tap="isDel">{{footer.delName}}</view>
			<view class="clearBoth"></view>
		</view>
		<view class="footer">
			<view class="leftBox" @tap="btnAll">
				<image class="icon_footer" src="/static/index/shopcar/icon_1.png" mode="" v-if="footer.all"></image>
				<view class="icon_footerNone" v-if="footer.all==false"></view>
				<view class="footerName">全选</view>
			</view>
			<view class="delName" v-if="footer.number !== 0" @tap="delBtn">{{footer.name}}({{footer.number}})</view>
			<view class="delName" v-if="footer.number == 0"  @tap="delBtn">{{footer.name}}</view>
		</view>
		<view class="noneBox" v-if="sysList.length==0">
			<image class="noneImage" src="/static/shopcar/none.png" mode=""></image>
			<view class="noneName">购物车为空~</view>
			<view class="ToIndex" @tap="ToIndex">去逛逛</view>
		</view>
		
		<view class="storeBox" v-for="(item,index) in sysList" :key="index" v-if="item.show">
			<image class="icon_all" src="/static/index/shopcar/icon_1.png" mode="" v-if="item.beThis" @tap="storeSingle(item.id,index)"></image>
			<view class="icon_allNone" v-if="item.beThis==false" @tap="storeSingle(item.id,index)"></view>
			<image class="logo" :src="item.logo" mode=""></image>
			<view class="storeName overflow_one">{{item.name}}</view>
			<uni-icons class="icons" type="arrowright" color="#262626" size="16"/>
			<view class="clearBoth"></view>
			<uni-swipe-action class="rowsBox">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(items,indexs) in item.list" :options="items.options" :key="indexs" @change="swipeChange" @click="swipeClick($event,index,indexs,items.id,)" v-if="items.show">
						<view class="rows">
							<view class="detailsBox">
								<image class="icon_all" src="/static/index/shopcar/icon_1.png" mode="" v-if="items.beThis" @tap="thingsSingle(items.id,index,indexs)"></image>
								<view class="icon_allNone" v-if="items.beThis==false" @tap="thingsSingle(items.id,index,indexs)"></view>
								<image class="cover" :src="items.cover" mode="" @tap="TapDetails(items.goods_id)"></image>
								<view class="right">
									<view class="title overflow_two" @tap="TapDetails(items.goods_id)">{{items.title}}</view>
									<view class="rules" @tap="TapDetails(items.goods_id)">{{items.rule}}</view>
									<view class="priceBox fontSemiBold" @tap="TapDetails(items.goods_id)">¥{{items.price}}</view>
									<view class="computeBox">
										<view class="boxBtn" @tap="addThings(items.id,index,indexs,items.buyNumber,0)">-</view>
										<view class="boxNumber">{{items.buyNumber}}</view>
										<view class="boxBtn" @tap="addThings(items.id,index,indexs,items.buyNumber,1)">+</view>
									</view>
								</view>
								<view class="clearBoth"></view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-swipe-action>
		</view>
		
		
		
	</view>
</template>
<style>
	.content{width:100%;min-height:100vh;background: rgb(245,245,249);padding-bottom:120upx;position: relative;}
	.content .topBox{width: 100%;padding:20upx 0;background: white;}
	.content .topBox .name{font-size: 26upx;color:#262626;float: left;margin-left: 5%;}
	.content .topBox .btnManage{font-size: 28upx;color:#DC582A;font-weight: bold;float: right;margin-right: 5%;}
	/* #ifdef MP-WEIXIN */
	.content .footer{width: 100%;height:90upx;position: fixed;bottom:0upx;left: 0;z-index: 2;background: white;border-top:2upx solid #DDDDDD;}
	/* #endif */
	/* #ifdef H5 */
	.content .footer{width: 100%;height:90upx;position: fixed;bottom:100upx;left: 0;z-index: 2;background: white;border-top:2upx solid #DDDDDD;}
	/* #endif */
	.content .footer .leftBox{width: 50%;height:90upx;display: flex;align-items: center;float: left;margin-left: 5%;}
	.content .footer .leftBox .icon_footer{width: 30upx;height: 30upx;float: left;margin-right: 20upx;}
	.content .footer .leftBox .icon_footerNone{width:30upx;height:30upx;margin-right: 20upx;border-radius: 26upx;border:2upx solid #CCCCCC;}
	.content .footer .leftBox .footerName{font-size: 28upx;float: left;color:#30313B}
	.content .footer .delName{width: 30%;height:70upx;line-height: 70upx;margin-top: 10upx;margin-right: 5%;font-size: 32upx;border-radius:200upx;float: right;background: #DC582A;color:white;text-align: center;}
	.content .noneBox{width: 100%;margin-top: 20%;display: flex;justify-content: center;flex-wrap: wrap;}
	.content .noneBox .noneImage{width:400upx;height:260upx;margin:0 20%}
	.content .noneBox .noneName{width:100%;text-align: center;color:#B3B3B3;font-size: 28upx;margin:10upx 0 20upx}
	.content .noneBox .ToIndex{width: 25%;padding:15upx 0;border-radius: 100upx;text-align: center;color:#FFFFFF;font-size: 28upx;font-weight: bold;background: #DC582A;}
	.content .storeBox{width:90%;margin-left: 5%;margin-top: 40upx;padding:30upx 2.5%;border-radius: 10upx;background:white;}
	.content .storeBox .icon_all{width: 30upx;height: 30upx;float: left;margin-right: 20upx;margin-top: 5upx;}
	.content .storeBox .icon_allNone{width:30upx;height:30upx;margin-right: 20upx;border-radius: 26upx;border:2upx solid #CCCCCC;float: left;margin-top: 5upx;}
	.content .storeBox .logo{width: 40upx;height: 40upx;float: left;margin-right:20upx;}
	.content .storeBox .storeName{max-width: 65%;height: 40upx;line-height: 40upx;float: left;font-size: 28upx;color:#262626;}
	.content .rowsBox{width:100%;padding:0;margin-bottom:20upx;border-radius: 10upx;background: white;}
	.content .rows{width: 100%;background: white;}
	.content .rows .detailsBox{width: 100%;margin-top:40upx;}
	.content .rows .detailsBox .icon_all{width: 30upx;height: 30upx;float: left;margin-right: 20upx;margin-top:75upx;}
	.content .rows .detailsBox .icon_allNone{width:30upx;height:30upx;margin-right: 20upx;border-radius: 26upx;border:2upx solid #CCCCCC;float: left;margin-top:75upx;}
	.content .rows .detailsBox .cover{width: 180upx;height: 180upx;float: left;border-radius: 10upx;}
	.content .rows .detailsBox .right{width: 60%;height:180upx;margin-left: 3%;float:left;position: relative;}
	.content .rows .detailsBox .right .title{height:64upx;color:#30313B;font-size: 24upx;}
	.content .rows .detailsBox .right .rules{color:#CCCCCC;font-size: 20upx;}
	.content .rows .detailsBox .right .priceBox{height:64upx;line-height: 90upx;color:#333333;font-size: 36upx;position: absolute;bottom:0;left: 0%;}
	.content .rows .detailsBox .right .computeBox{color:#333333;font-size: 36upx;position: absolute;bottom:0;right: 0%;border:2upx solid #EEEEEE;border-radius: 10upx;}
	.content .rows .detailsBox .right .computeBox .boxBtn{float: left;width:50upx;height: 50upx;line-height:50upx;text-align:center;color:#CCCCCC}
	.content .rows .detailsBox .right .computeBox .boxNumber{float: left;width: 80upx;height: 50upx;line-height:50upx;text-align:center;border-left:2upx solid #EEEEEE;border-right:2upx solid #EEEEEE;color:#30313B;font-size: 24upx;}
</style>
<script>
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import Share from '@/common/wx_share.js'
	export default {
		components:{
			uniSwipeActionItem
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				footer:{
					name:"结算",
					delName:"管理",
					number:0,
					allNumber:0,
					all:false,
				},
				sysList:[],
				pages:1
				
			}
		},
		onLoad(e){},
		onShow(){
			uni.showLoading({
				title:"加载中..."
			})
			this.footer.delName = "管理"
			this.sysList = []
			this.footer.number = 0
			this.footer.allNumber = 0
			this.pages = 1
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(){
				var sysList = []
				let param={
					token:this._$userToken("userInfo").token,
					page:this.pages
				};
				this._$InitRequest.request("Cart/index", param).then(res => {
					res.data.forEach( (item) =>{
						var list = []
						for (var i = 0; i < item.goodres.length; i++) {
							list.push({
								id:item.goodres[i].id,
								goods_id:item.goodres[i].goods_id,
								beThis:false,
								show:true,
								cover:item.goodres[i].thumb_url,
								title:item.goodres[i].goods_name,
								rule:item.goodres[i].goods_attr_str,
								price:item.goodres[i].shop_price,
								buyNumber:item.goodres[i].num,
								options: [{
									text: '删除',
									style: {
										backgroundColor: 'rgb(220,88,42)'
									}
								}],
							})
						}
						sysList.push({
							id:item.id,
							show:true,
							beThis:false,
							logo:item.logo,
							name:item.shop_name,
							list:list
						})
					})
					for (var i = 0; i < sysList.length; i++){
						this.sysList.push( sysList[i] )
						if( res.data.length !== 0 ){
							this.footer.allNumber += this.sysList[i].list.length
						}
					}
					setTimeout(()=>{
						uni.hideLoading()
					},500)
				},error=>{})
			},
			TapDetails(id){
				uni.navigateTo({
					url:"/pages_index/pages/details/details?id=" + id
				})
			},
			isDel(){
				if( this.footer.delName == "管理" ){
					this.footer.delName = "完成"
					this.footer.name = "删除"
				}else{
					this.footer.delName = "管理"
					this.footer.name = "结算"
				}
			},
			btnAll(){
				if( this.footer.all == true ){
					// this.footer.name = "结算"
					this.footer.all = false
					for (var i = 0; i < this.sysList.length; i++) {
						this.sysList[i].beThis = false
						for(var a =0;a<this.sysList[i].list.length;a++){
							this.sysList[i].list[a].beThis = false
							this.footer.number = 0
						}
					}
				}else{
					// this.footer.name = "删除"
					this.footer.all = true
					this.footer.number = 0
					for (var i = 0; i < this.sysList.length; i++) {
						this.sysList[i].beThis = true
						for(var a =0;a<this.sysList[i].list.length;a++){
							this.sysList[i].list[a].beThis = true
							this.footer.number += 1
						}
					}
				}
			},
			swipeChange(e) {},
			swipeClick(e,index,indexs,id){
				let that = this;
				let {content} = e
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: (res) => {
							if (res.confirm) {
								this.footer.allNumber -= 1
								that.sysList[index].list[indexs].show = false
								uni.showToast({icon:"none",title:"删除成功"})
								if( that.sysList[index].list.length == 1 ){
									that.sysList[index].show = false
								}
							}else if(res.cancel){}
						}
					});
				}
			},
			storeSingle(id,index){
				if( this.sysList[index].beThis == true ){
					this.sysList[index].beThis = false
					for (var i = 0; i < this.sysList[index].list.length; i++) {
						if( this.sysList[index].list[i].beThis == true )this.footer.number -= 1
						this.sysList[index].list[i].beThis = false
					}
				}else{
					this.sysList[index].beThis = true
					for (var i = 0; i < this.sysList[index].list.length; i++) {
						if( this.sysList[index].list[i].beThis == false )this.footer.number += 1
						this.sysList[index].list[i].beThis = true
					}
				}
			},
			thingsSingle(id,index,indexs){
				if( this.sysList[index].list[indexs].beThis == true ){
					this.sysList[index].list[indexs].beThis = false
					this.footer.number -= 1
					
				}else{
					this.sysList[index].list[indexs].beThis = true
					this.footer.number += 1
				}
			},
			addThings(id,index,indexs,number,type){
				if( type == 0 ){
					if( this.sysList[index].list[indexs].buyNumber > 1 ){
						this.sysList[index].list[indexs].buyNumber --
						this.AjaxComputeNumber(id,number-1)
					}
				}else if( type == 1 ){
					this.sysList[index].list[indexs].buyNumber ++
					this.AjaxComputeNumber(id,number+1)
				}
			},
			AjaxComputeNumber(id,num){
				let param={
					token:this._$userToken("userInfo").token,
					cart_id:id,
					num:num,
				};
				this._$InitRequest.request('Cart/editcart', param).then(res => {
					
				},error=>{})
			},
			delBtn(){
				let that = this;
				let arr = []
				let showStroe = ""
				if( this.footer.name == "删除" ){
					uni.showModal({
						title: '提示',
						content: '确认将这'+this.footer.number+'个宝贝删除?',
						success: (res) => {
							if (res.confirm) {
								for (var i = 0; i < this.sysList.length; i++) {
									for(var a = 0;a<this.sysList[i].list.length;a++){
										if( this.sysList[i].list[a].beThis == true ){
											arr.push( this.sysList[i].list[a].id )
										}
									}
								}
								arr = arr.toString()
								let param={
									token:this._$userToken("userInfo").token,
									cart_id:arr
								};
								this._$InitRequest.request('Cart/delcart', param).then(res => {
									uni.showToast({icon:"none",title:res.mess})
									if( res.status == 200 ){
										this.sysList = []
										this.footer.allNumber = 0
										this.footer.number = 0
										this.pages = 1
										this.AjaxLoad()
										for (var i = 0; i < this.sysList.length; i++) {
											for(var a = 0;a<this.sysList[i].list.length;a++){
												if( this.sysList[i].list[a].beThis == true ){
													showStroe++
													this.footer.number --
													this.footer.allNumber --
													// this.sysList[i].list[a].show = false
													// if( showStroe == this.sysList[i].list.length )this.sysList[i].show = false
													// this.sysList[i].list[a].beThis = false
												}
											}
										}
									}
								},error=>{})
							}else if(res.cancel){}
						}
					});
				}else if( this.footer.name == "结算" ){
					for (var i = 0; i < this.sysList.length; i++) {
						for(var a = 0;a<this.sysList[i].list.length;a++){
							if( this.sysList[i].list[a].beThis == true ){
								arr.push( this.sysList[i].list[a].id )
							}
						}
					}
					// uni.showToast({icon:"none",title:"正在开发中..."})
					// return;
					arr = arr.toString()
					let param={
						token:this._$userToken("userInfo").token,
						cart_idres:arr
					};
					this._$InitRequest.request('order/cartbuy', param).then(res => {
						if( arr.length !== 0 ){
							uni.navigateTo({
								url:"/pages_mine/pages/sureOrder_byShopCar/sureOrder_byShopCar?arrId=" + arr
							})
						}
					},error=>{})
				}
			},
			ToIndex(){
				uni.switchTab({
					url:"/pages/tabbar/index"
				})
			}
			
			
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/.uni-swipe_box{background:  rgb(245,245,249);}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>